<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项清单</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1><i class="fas fa-tasks"></i> 待办事项清单</h1>
            <p class="subtitle">管理您的日常任务</p>
        </header>

        <div class="todo-app">
            <!-- 添加任务区域 -->
            <div class="add-task-section">
                <div class="input-group">
                    <input type="text" id="taskInput" placeholder="添加新任务..." maxlength="100">
                    <button id="addBtn" class="add-btn">
                        <i class="fas fa-plus"></i>
                        添加
                    </button>
                </div>
            </div>

            <!-- 过滤器 -->
            <div class="filter-section">
                <div class="filter-buttons">
                    <button class="filter-btn active" data-filter="all">
                        <i class="fas fa-list"></i>
                        全部 (<span id="allCount">0</span>)
                    </button>
                    <button class="filter-btn" data-filter="active">
                        <i class="fas fa-clock"></i>
                        进行中 (<span id="activeCount">0</span>)
                    </button>
                    <button class="filter-btn" data-filter="completed">
                        <i class="fas fa-check"></i>
                        已完成 (<span id="completedCount">0</span>)
                    </button>
                </div>
                <button id="clearCompleted" class="clear-btn">
                    <i class="fas fa-trash"></i>
                    清除已完成
                </button>
            </div>

            <!-- 任务列表 -->
            <div class="task-list-container">
                <ul id="taskList" class="task-list"></ul>
                <div id="emptyState" class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <h3>暂无任务</h3>
                    <p>添加您的第一个任务开始管理待办事项</p>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-item">
                <i class="fas fa-calendar-day"></i>
                <span>今日任务: <strong id="todayTasks">0</strong></span>
            </div>
            <div class="stat-item">
                <i class="fas fa-percentage"></i>
                <span>完成率: <strong id="completionRate">0%</strong></span>
            </div>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 编辑任务</h3>
                <button class="close-btn" id="closeModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <input type="text" id="editTaskInput" placeholder="编辑任务内容..." maxlength="100">
            </div>
            <div class="modal-footer">
                <button id="cancelEdit" class="cancel-btn">取消</button>
                <button id="saveEdit" class="save-btn">保存</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>